import type { MenuProps } from "antd";
import { Dropdown } from "antd";
import { MenuButton } from "./MenuButton.tsx";
import { useEffect, useState } from "react";
import { SvgIcon } from "../common/SvgIcon.tsx";

const lineTypes = [
  { name: "曲线", icon: "#l-curve2", value: "curve" },
  { name: "线段", icon: "#l-polyline", value: "polyline" },
  { name: "直线", icon: "#l-line", value: "line" },
  { name: "脑图曲线", icon: "#l-mind", value: "mind" },
];

export const ConnectionDropdown = () => {
  const [icon, setIcon] = useState("#l-curve2");
  const [items, setItems] = useState<MenuProps["items"]>([]);
  const [title, setTitle] = useState("曲线");
  useEffect(() => {
    lineTypes.forEach((item) => {
      let obj = {
        key: item.value,
        label: (
          <div>
            <span> {item.name}</span>
            (<SvgIcon icon={item.icon} />)
          </div>
        ),
      };
      setItems((arr: any) => {
        return [...arr, obj];
      });
    });
    return () => {
      setItems([]);
    };
  }, []);
  const onClick: MenuProps["onClick"] = ({ key }) => {
    let item = lineTypes.find((v) => v.value === key);
    if (item) {
      setIcon(item.icon);
      setTitle(item.name);
    }
    if (window.meta2d) {
      window.meta2d.store.options.drawingLineName = key;
      window.meta2d.canvas.drawingLineName &&
        (window.meta2d.canvas.drawingLineName = key);
      window.meta2d.store.active?.forEach((pen: any) => {
        window.meta2d.updateLineType(pen, key);
      });
    }
  };
  return (
    <>
      <Dropdown arrow menu={{ items, onClick }}>
        <a onClick={(e) => e.preventDefault()}>
          <MenuButton
            arrow
            children={<SvgIcon icon={icon} />}
            title={title}
          ></MenuButton>
        </a>
      </Dropdown>
    </>
  );
};
